<template>
  <div class="app-container">
    <div class="box-server">
      <el-row class="box-elrow"
              :gutter="64">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-input v-model="input"
                      placeholder="用户ID/昵称/手机号"></el-input>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <div class="grid-content bg-purple">
              <el-select v-model="value"
                         placeholder="是否在线状态">
                <el-option v-for="item in options"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
        </el-col>

        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-button type="primary">搜索</el-button>
            <el-button type="danger"
                       @click="deleteuser">批量删除</el-button>
          </div>
        </el-col>
      </el-row>

      <div class="box-data">
        <el-table ref="multipleTable"
                  :data="tableData"
                  tooltip-effect="dark"
                  style="width: 100%"
                  border
                  center
                  @selection-change="handleSelectionChange">
          <el-table-column type="selection">
          </el-table-column>
          <el-table-column fixed
                           prop="name"
                           label="申请用户ID">
          </el-table-column>
          <el-table-column prop="name"
                           label="法人姓名">
          </el-table-column>
          <el-table-column prop="name"
                           label="法人身份证号">
          </el-table-column>
          <el-table-column prop="name"
                           label="法人联系电话">
          </el-table-column>
          <el-table-column prop="name"
                           label="公司名称">
          </el-table-column>
          <el-table-column prop="name"
                           label="营业执照">
          </el-table-column>
          <el-table-column prop="name"
                           label="公司地址">
          </el-table-column>
          <el-table-column prop="name"
                           label="法人身份证正面">
          </el-table-column>
          <el-table-column prop="name"
                           label="法人身份证反面">
          </el-table-column>
          <el-table-column prop="name"
                           label="三证合一">
          </el-table-column>
          <el-table-column prop="name"
                           label="认证状态">
          </el-table-column>
          <el-table-column prop="name"
                           label="申请时间">
          </el-table-column>

          <el-table-column label="操作"
                           width="700">
            <template slot-scope="scope">
              <el-button size="mini"
                         @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button size="mini"
                         type="danger"
                         @click="handleDelete(scope.$index, scope.row)">重置密码</el-button>
              <el-button size="mini"
                         @click="handleEdit(scope.$index, scope.row)">充值</el-button>
              <el-button size="mini"
                         type="danger"
                         @click="handleDelete(scope.$index, scope.row)">锁定</el-button>
              <el-button size="mini"
                         type="danger"
                         @click="handleDelete(scope.$index, scope.row)">流水</el-button>
              <el-button size="mini"
                         type="danger"
                         @click="handleDelete(scope.$index, scope.row)">好友</el-button>
              <el-button size="mini"
                         type="danger"
                         @click="handleDelete(scope.$index, scope.row)">通讯录</el-button>
              <el-button size="mini"
                         type="danger"
                         @click="handleDelete(scope.$index, scope.row)">邀请码</el-button>
              <el-button size="mini"
                         type="danger"
                         @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="box-page">
        <el-pagination @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="currentPage4"
                       :page-sizes="[100, 200, 300, 400]"
                       :page-size="100"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="400">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {

  data() {
    return {
      value: "",
      options: [{
        value: '1',
        label: '是否认证'
      }, {
        value: '2',
        label: '已认证'
      }, {
        value: '3',
        label: '认证中'
      }],
      dialogStatus: "",
      input: "",
      dialogFormVisible: false,
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-06',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      multipleSelection: []
    }

  },
  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    deleteuser() {
      this.$confirm("确认要删除吗?", "提示", {
        confirmButtonText: "确认",
        concelButtonText: "取消",
        type: "warning"
      }).then(() => {
        console.log("yes");
      }).catch(() => {
        console.log("erer")
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  height: 100%;
}
.box-server {
  height: 100%;
  background-color: #ffff;
  margin: 20px 20px 20px 20px;
  .box-elrow {
    padding: 16px 16px 16px 16px;
  }
  .Exhibition {
    height: 50px;
    margin: 10px 16px 0px;
    display: flex;
    background-color: #f2f2f2;
    .exhibitionleft {
      width: 8px;
      background-color: #009688;
    }
    .exhibitionright {
      display: flex;
      // justify-content: space-between;
      align-content: center;
      .box-item {
        background-color: #3ebfea;
        padding: 8px 12px 8px 12px;
        border-radius: 5px;
        margin-right: 5px;
      }
    }
  }
  .exhtitle {
    display: flex;
    align-items: center;
  }
  .box-data {
    padding: 16px 16px 16px 16px;
  }
}
.pr {
  padding-top: 12px;
}
.box-page {
  display: flex;
  justify-content: flex-end;
}
</style>

